<template>
  <div class="navcontainer _navcontainer">
      <!-- 设置菜单的图像 -->
      <div class="navicon _navcion">
          <i class="iconfont icon-caidan" @click="opencaidan()"></i>
      </div>
      <!-- 设置苹果的图像 -->
      <div class="appleicon _appleicon" >
      <i class="iconfont icon-pingguo" @click="$router.push('./home')"></i>
      </div>
      <!-- 设置菜单的关闭按钮 -->
      <div id="navId" class="mainnavlist _mainnavlist">
      <div class="navlistclose">
          <i class='iconfont icon-guanbi' @click="closecaidan()"></i>
      </div>
      <div @click="routerpush('/mac')">Mac</div>
      <div @click="routerpush('/ipad')">iPad</div>
      <div @click="routerpush('/iphone')">iPhone</div>
      <div @click="routerpush('/watch')">Watch</div>
      <div @click="routerpush('/music')">Music</div>
      <div @click="routerpush('/support')">技术支持</div>
      
      <div>
          <i class="iconfont icon-sousuo1"></i>
      </div>
      </div>
      <div class="shopcar">
          <i class="iconfont icon-gouwuche"></i>
      </div>
  </div>
</template>

<script>
export default {
name:"NavYop",
methods: {
    // 当宽度小于800的时候会自动打开菜单图标，点击菜单图标，显示隐藏的菜单
    opencaidan(){
      var dom =document.getElementById('navId')
      if (dom.classList.contains('navlistshow')) {
          return
      }else{
          dom.classList.add('navlistshow')
      }
    },
    closecaidan(){
     var dom =document.getElementById('navId')
     if (dom.classList.contains('navlistshow')) {
        dom.classList.remove('navlistshow') 
     }
    },
    // 点击之后路由跳转
    routerpush(value){
     this.$router.push(value)
     this.closecaidan()
    }
},
}
</script>

<style lang='less'  scoped>
// 当屏幕宽度大于800的时候
@media only screen and (min-width:800px) {
    .navcontainer {
        top: 0;
        display: flex;
        height: 40px;
        align-items: center;
        justify-content: center;
        background-color: rgb(51, 51, 51);
        color: rgb(214, 214, 214);
        .navicon{
            // 这个表达的是无法展示其样式
        display: none;
        cursor: pointer;
        }
        .navicon:hover{
            color:white;
        }
        .appleicon{
            display: flex;
            justify-content: center;
            width: 100px;
            cursor: pointer;
        }
        .appleicon:hover{
            color: white;
        }
        .mainnavlist{
            display: flex;
            height: 40px;
            align-items: center;
            justify-content: center;
       
        .navlistclose{
            display: none;
            cursor: pointer;
        }
        div{
        //  文本水平对齐
        text-align: center;
        height: 40px;
        line-height: 40px;
        width: 95px;
        cursor: pointer;
        font-size: 14px;
        // 设置文本的粗细
        font-weight: 500;
        }
        div:hover{
            color: white;
        }
        }
        .shopcar{
            width: 100px;
            cursor: pointer;
        }
        .shopcar:hover{
            color: white;
        } 
    }
}
// 当屏幕小于800的时候
@media only screen  and(max-width:800px){
    ._navcontainer{
        top: 0;
        display: flex;
        align-items: center;
        // 使得每个单元自动分配间隔
        justify-content: space-between;
        height: 40px;
        background-color: rgb(51, 51, 51);
        color: rgb(214, 214, 214);
        position: relative;
        ._navcion{
             display: flex;
            justify-content: center;
            width: 100px;
        }
        ._appleicon{
            display: flex;
            justify-content: center;
            width: 100px;
        }
        ._mainnavlist{
            display: flex;
            flex-direction: column;
            position: absolute;
            // 先默认不展示样式
            display: none;
            // 将其样式放在第一个
            position: fixed;
            // !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。
            top:0 !important;
            z-index:1999 !important ;
            padding-top: 40px !important;
            width: 100%;
            height: 100%;
            color: rgb(214, 214, 214);
            background-color: rgba(0, 0, 0, 0.95);
            padding: 0 40px;
            top: 40px;
            // 设置元素的堆叠属性
            z-index: 199;
            div{
                // 设置文字的样式
                text-align: left;
                height: 40px;
                line-height: 40px;
                width: 100%;
                border-bottom: 1px solid rgb(214, 214, 214);
            }
        }
        .shopcar{
            display: flex;
            justify-content: center;
            width: 100px;
        }
    }
    // 这里是让其显示图标
    .navlistshow {
      display: block !important;
    }
}
</style>